<template>
   <div class="extensionQRcode">
      <myHead title="推广中心"></myHead>
      <div class="content" ref="photo">
         <img src="../../../static/img/tger000.png" alt="">
         <div class="QRcode">
            <p class="Q-tit">我的二维码</p>
            <p class="Q-img" ref="qrCodeUrl">

            </p>
            <p class="Q-yqm">
<!--               <span>用户名</span>-->
               <span>用户名：{{$store.state.userInfo.nickname}}</span>
            </p>
         </div>
      </div>
      <div class="footer" :style="{minHeight:$store.state.minHeight-5.6+'rem'}">
         <p>
            <img src="../../../static/img/tger002.png" alt="">
            <span>分享好友</span>
         </p>
         <p>
            <img src="../../../static/img/tger003.png" alt="">
            <span>保存图片</span>
         </p>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import QRCode from "qrcodejs2";
    export default {
        name: "extensionQRcode",
        components:{
            myHead
        },
        data(){
            return{
                url:''
            }
        },
        created(){
            this.$myAxios('index/share/generalize_url', 'post',{
                user_id:this.$store.state.userInfo.id,
            }).then(res=>{
                console.log(res.data);
                if (res.data.state == '1') {
                    this.url = res.data.url;
                    this.createQrcode()
                } else {
                    this.$myNotice('请检查网络!',1500);
                }
            });
        },
        mounted(){

        },
        methods:{
            createQrcode(){
                var url = this.url;
                new QRCode(this.$refs.qrCodeUrl, {
                    text:url, // 需要转换为二维码的内容
                    width: 120,
                    height: 120,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            }
        }

    }
</script>

<style scoped>
   .extensionQRcode {
      padding-top: .49rem;
   }
   .content {
      position: relative;
      font-size: 0;
      height: 5.11rem;
   }
   .QRcode {
      position: absolute;
      width: 2.61rem;
      height: 2.35rem;
      background-image: url("../../../static/img/tger001.png");
      background-size: 100% 100%;
      bottom: 0;
      left: calc(50% - 1.27rem);
      display: flex;
      flex-flow: column;
      align-items: center;
      /*justify-content: space-between;*/
      box-sizing: border-box;
      padding: .15rem 0;
   }
   .Q-tit {
      padding-top: .05rem;
      height: .2rem;
      font-size:.13rem;
      line-height: .2rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #FF7004;
   }
   .Q-img {
      width: 1.2rem;
      height: 1.2rem;
     margin-top: .1rem;
   }
   .Q-yqm {
      display: flex;
      flex-flow: column;
      align-items: center;
      position: absolute;
      bottom: .15rem;
     font-size:.12rem;
     font-family:Source Han Sans CN;
     font-weight:bold;
     color: #333333;
     line-height: .35rem;
   }
   .Q-yqm>span:nth-child(2) {
      font-size:.1rem;
      font-family:Source Han Sans CN;
      font-weight:500;
      color: #808080;
   }
   .footer {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .footer>p {
      width: 50%;
      display: flex;
      flex-flow: column;
      align-items: center;
      height: 100%;
   }
   .footer>p>img {
      width: .42rem;
      max-height: .42rem;
      margin-bottom: .15rem;
   }
   .footer>p>span {
      font-size:.15rem;
      font-family:Source Han Sans CN;
      font-weight:500;
      color: #1F1F1F;
   }
</style>
